<template>
	<el-row style="background: #f3f6fa;">
		<el-row class="ParticularIng">
			<!-- 面包屑 -->
			<el-row style="padding: 2vh 0;">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<!-- <el-breadcrumb-item :to="{ path: '/ListItem/ListItem' }">列表</el-breadcrumb-item> -->
					<!-- <el-breadcrumb-item :to="{ path: '/ListItem/Particulars' }">拍卖组列表</el-breadcrumb-item> -->
					<el-breadcrumb-item>拍卖大厅</el-breadcrumb-item>
				</el-breadcrumb>
			</el-row>

			<!-- 图册 -->
			<el-row type="flex" class="ParticularIng-car">
				<el-col class="ParticularIng-car-imgBox  y_flex_ju_cen y_flex" :span="17">
					<el-image ref="img" :src='dat.img'></el-image>
				</el-col>
				<el-col :span="7" class="ParticularIng-car-scroll">
					<el-row v-for="(item,index) in dat.dat_list" :key="index" type="flex"
						class="ParticularIng-car-scroll-list">
						<el-col>
							<el-image @click="rightImg(item.img)" :src='item.img'></el-image>
						</el-col>
					</el-row>
				</el-col>
			</el-row>

			<el-row class="ParticularIng-see">
				<el-tabs type="border-card">
					<el-tab-pane v-for="(item,index) in tab_list" :label="item">
						<el-row v-if="item == '拍卖品详情'">
							<el-col>
								<el-row>
									<el-col style="margin: 2vh 0;">
										<Tabs :title="'拍卖'" :ba="'#53afd6'"></Tabs>
									</el-col>
									<el-col>
										<el-row :gutter="20" type="flex">
											<el-col :span="2">
												拍卖品:
											</el-col>
											<el-col>
												{{dat.name}}
											</el-col>
										</el-row>
									</el-col>
									<el-col style="margin: 2vh 0;">
										<el-row :gutter="20" type="flex">
											<el-col :span="2">
												距结束:
											</el-col>
											<el-col>
												<Down :endTime='dat.endTime' :endText='dat.endText'></Down>
											</el-col>
										</el-row>
									</el-col>
									<el-col>
										<el-row :gutter="20" type="flex">
											<el-col :span="2">
												当前价:
											</el-col>
											<el-col>
												<span>{{$money}}</span>
												<span>{{dat.price}}</span>
												<span> {{dat.price_man}}出价人</span>
											</el-col>
										</el-row>
									</el-col>
									<el-col :span="10" class="sub">
										<el-form ref="form" :model="form" label-width="80px">
											<el-form-item label="出价">
												<el-input :disabled="disabled" placeholder="200000" v-model="form.price"
													clearable>
												</el-input>
											</el-form-item>
											<el-form-item>
												<el-button @click="ToLogin(disabled)" v-if="dat.check_time"
													:type="disabled?button_type[0]:button_type[1]">
													{{disabled?"请先登录":"立即报名"}}
												</el-button>
												<el-button disabled v-else="dat.check_time" :type="button_type[0]">
													拍卖已经结束
												</el-button>
											</el-form-item>
										</el-form>
									</el-col>
								</el-row>
								<el-row>
									<el-col style="margin: 2vh 0;">
										<Tabs :title="'出价者'" :ba="'#78d6a2'"></Tabs>
									</el-col>
									<el-col>
										<div class="infinite-list-wrapper">
											<div class="list" v-infinite-scroll="load"
												infinite-scroll-disabled="disableds">
												<div v-for="(i,index) in count" :key='index' class="list-item">
													<el-row type="flex" class="y_flex_ju_spbe">
														<div class="y_flex">
															<span>
																<el-avatar> user </el-avatar>
															</span>
															<span>
																<div>User Name</div>
																<div>
																	<span>price:</span>
																	<span>{{$money}}</span>
																	<span>12331W</span>
																</div>
															</span>
														</div>
														<div>
															<div v-if="index == 0">领先</div>
															<div>11:20</div>
														</div>
													</el-row>
													<el-divider></el-divider>
												</div>
											</div>
											<p v-if="loading">加载中...</p>
											<p v-if="noMore">没有更多了</p>
										</div>
									</el-col>
								</el-row>
							</el-col>

						</el-row>
					</el-tab-pane>
				</el-tabs>
			</el-row>

		</el-row>
	</el-row>
</template>

<script>
	import Tabs from '/src/components/Tabs/Tabs.vue'
	import Down from '/src/components/CountDown/CountDown.vue'
	export default {
		components: {
			Tabs,
			Down
		},
		data() {
			return {
				user: this.$store.getters.getUser,
				disabled: true,
				button_type: ['danger', 'primary'],
				form: {
					price: '',
				},
				form_shake: true,
				form_time: '',
				dat: {
					name: '【免交保】精选95新 积家男表 公价85500 国检保真 品相佳 大师 月相 自动机械手表',
					endTime: new Date("2022/11/22 18:00:20").getTime() / 1000 + ' ',
					endText: '拍卖已结束',
					img: 'https://img12.360buyimg.com/n12/s350x350_jfs/t1/133805/26/14581/249639/5f9fa838E23195c0d/12e0108dbef63297.jpg',
					price: '244000',
					price_man: 'PC001',
					check_time: true,
					dat_list: [{
							img: 'https://img12.360buyimg.com/n12/s350x350_jfs/t1/133805/26/14581/249639/5f9fa838E23195c0d/12e0108dbef63297.jpg'
						},
						{
							img: 'https://img12.360buyimg.com/n12/s350x350_jfs/t1/139171/38/12856/289511/5f9fa845E55354194/a3729a769daf25f3.jpg'
						},
						{
							img: 'https://img12.360buyimg.com/n12/s350x350_jfs/t1/147503/5/12860/193429/5f9fa847E69832934/5eafb27161e3e82f.jpg'
						}
					],
				},
				tab_list: ['拍卖品详情'],
				price_people: [],
				count: 0,
				loading: false
			}
		},
		computed: {
			noMore() {
				return this.count >= 62
			},
			disableds() {
				return this.loading || this.noMore
			}
		},
		mounted() {
			this.getUser()
		},
		methods: {
			ToLogin(res) {
				let id = this.$route.query.id
				if (res) { //无用户数据跳转到登录
					this.$store.commit('setLookPush', id)
					this.$router.push('/User/Login')
				}
				if (!res) { //有用户数据
					if (this.form_shake == false) { //防抖
						this.$notify({
							title: '警告',
							message: '您的点击过快，缓一下再提交',
							type: 'warning'
						});
						if (!this.form_time) {
							let time = setTimeout(_ => {
								this.form_shake = true
								this.form_time = ''
							}, 1000)
							this.form_time = time
						}
					} else { //请求通信并且上锁
						this.form_shake = false
						this.$notify({
							title: '成功',
							message: '竞拍成功，您可以再个人中心追踪该拍品',
							type: 'success'
						});
					}

				}

			},
			load() {
				this.loading = true
				setTimeout(() => {
					this.count += 2
					this.loading = false
				}, 1000)
			},
			getUser() {
				this.user = this.$store.getters.getUser
				this.disabled = !this.$objif(this.user)
			},
			rightImg(res) {
				this.dat.img = res
				if (this.$refs.img.$el.className.indexOf('animationShow') != -1) {
					this.$refs.img.$el.className = this.$refs.img.$el.className.replace(' animationShow', '')
				}
				setTimeout(_ => {
					this.$refs.img.$el.className = this.$refs.img.$el.className + ' animationShow'
				}, 1000 / 144)

			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'ParticularIng.scss'
</style>
